<template>
  <div>
  <div class="container main">
    <div class="enroll">
      <div class="row ">
        <div class="col-xs-3 col-md-3 barely">
          <div>
            <p class="bj_img">
              <img src="../../../static/images/super_zhuce.png" alt="" />
            </p>
            <p>路演活动<span>15628</span>场</p>
          </div>
        </div>
        <div class="col-xs-3 col-md-3 barely">
          <div>
            <p class="bj_img">
              <img src="../../../static/images/super_jigou.png" alt="" />
            </p>
            <p>创业项目<span>200</span>个</p>
          </div>
        </div>
        <div class="col-xs-3 col-md-3 barely">
          <div>
            <p class="bj_img">
              <img src="../../../static/images/super_huodong.png" alt="" />
            </p>
            <p>投资人<span>156</span>人</p>
          </div>
        </div>
        <div class="col-xs-3 col-md-3 barely">
          <div class="noBor">
            <p class="bj_img">
              <img src="../../../static/images/super_huodong.png" alt="" />
            </p>
            <p>投资机构<span>1568</span>家</p>
          </div>
        </div>
      </div>
    </div>
    <div class="active-center">
      <h1 class="active-center-h">路演活动</h1>
      <p class="active-center-p">苏南科技企业股权路演中心，以项目路演为特色，聚焦创业者“产品、运营、现金流”三大核心需求，
        致力于打造集融资对接、产业发展以及运营提升于一体的综合性服务平台， 旗下包括领军秀路演、
        领军产业沙龙、领军人才俱乐部、企业发展服务沙龙、政企服务面对面等五大品牌活动。</p>
      <div class="active-list">
        <div class="active-list-left">
          <img src="../../../static/images/hd_p1.png">
        </div>
        <div class="active-list-right">
           <div class="flex-img">
             <img src="../../../static/images/hd_p1.png">
             <img src="../../../static/images/hd_p1.png">
           </div>
          <div class="active-text">
            <h3>活动通知</h3>
            <div class="list-item">
              <ul>
                <li><span>智能管理+是一系列围绕智能制造的价值服务</span><span>2019-03-15 14:18</span></li>
                <li><span>智能管理+是一系列围绕智能制造的价值服务</span><span>2019-03-15 14:18</span></li>
                <li><span>智能管理+是一系列围绕智能制造的价值服务</span><span>2019-03-15 14:18</span></li>
                <li><span>智能管理+是一系列围绕智能制造的价值服务</span><span>2019-03-15 14:18</span></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="clear"></div>
      </div>
      <div class="button-more">
        <button>查看更多</button>
      </div>
    </div>

  </div>
  <div class="startup-project">
    <div class="container">
    <h1 class="active-center-h">创业项目</h1>
    <p class="active-center-p">苏南科技企业股权路演中心，以项目路演为特色，聚焦创业者“产品、运营、现金流”三大核心需求，
      致力于打造集融资对接、产业发展以及运营提升于一体的综合性服务平台， 旗下包括领军秀路演、
      领军产业沙龙、领军人才俱乐部、企业发展服务沙龙、政企服务面对面等五大品牌活动。</p>
      <div class="row tp-img">
        <div class="col-xs-3 col-md-3 "><img src="../../../static/images/hd_p1.png"></div>
        <div class="col-xs-3 col-md-3 "><img src="../../../static/images/hd_p1.png"></div>
        <div class="col-xs-3 col-md-3 "><img src="../../../static/images/hd_p1.png"></div>
        <div class="col-xs-3 col-md-3 "><img src="../../../static/images/hd_p1.png"></div>
  </div>
      <div class="button-more">
        <button>查看更多</button>
      </div>
    </div>
  </div>
    <div class="container">
<div class="tz-p">
    <span
      v-for="(item,index) in navD"
      :class="{'active':cur === index}"
      @click="getItme(item,index)"
    >
      {{ item.zt }}
    </span>

</div>
<div class="row detail-img">
  <div class="col-xs-3 col-md-4 img-hover">
    <div class="investor">
       <div class="investor-img"><img src="../../../static/images/hd_p1.png"></div>
      <div class="investor-msg">
        <div class="investor-name">王振英</div>
        <div class="investor-job text-overflow">厦门市熙重集团 总经理</div>
        <div class="investor-man text-overflow">毅达汇智股权合伙人</div>
      </div>
      <buttom class="mentors">创业导师</buttom>
    </div>
  </div>
  <div class="col-xs-3 col-md-4 img-hover">
    <div class="investor">
      <div class="investor-img"><img src="../../../static/images/hd_p1.png"></div>
      <div class="investor-msg">
        <div class="investor-name">王振英</div>
        <div class="investor-job text-overflow">厦门市熙重集团 总经理</div>
        <div class="investor-man text-overflow">毅达汇智股权合伙人</div>
      </div>
      <buttom class="mentors">创业导师</buttom>
    </div>
  </div>
  <div class="col-xs-3 col-md-4 img-hover">
    <div class="investor">
      <div class="investor-img"><img src="../../../static/images/hd_p1.png"></div>
      <div class="investor-msg">
        <div class="investor-name">王振英</div>
        <div class="investor-job text-overflow">厦门市熙重集团 总经理</div>
        <div class="investor-man text-overflow">毅达汇智股权合伙人</div>
      </div>
      <buttom class="mentors">创业导师</buttom>
    </div>
  </div>
  <div class="col-xs-3 col-md-4 img-hover">
    <div class="investor">
      <div class="investor-img"><img src="../../../static/images/hd_p1.png"></div>
      <div class="investor-msg">
        <div class="investor-name">王振英</div>
        <div class="investor-job text-overflow">厦门市熙重集团 总经理</div>
        <div class="investor-man text-overflow">毅达汇智股权合伙人</div>
      </div>
      <buttom class="mentors">创业导师</buttom>
    </div>
  </div>
  <div class="col-xs-3 col-md-4 img-hover">
    <div class="investor">
      <div class="investor-img"><img src="../../../static/images/hd_p1.png"></div>
      <div class="investor-msg">
        <div class="investor-name">王振英</div>
        <div class="investor-job text-overflow">厦门市熙重集团 总经理</div>
        <div class="investor-man text-overflow">毅达汇智股权合伙人</div>
      </div>
      <buttom class="mentors">创业导师</buttom>
    </div>
  </div>
  <div class="col-xs-3 col-md-4 img-hover">
    <div class="investor">
      <div class="investor-img"><img src="../../../static/images/hd_p1.png"></div>
      <div class="investor-msg">
        <div class="investor-name">王振英</div>
        <div class="investor-job text-overflow">厦门市熙重集团 总经理</div>
        <div class="investor-man text-overflow">毅达汇智股权合伙人</div>
      </div>
      <buttom class="mentors">创业导师</buttom>
    </div>
  </div>
  <div class="col-xs-3 col-md-4 img-hover">
    <div class="investor">
      <div class="investor-img"><img src="../../../static/images/hd_p1.png"></div>
      <div class="investor-msg">
        <div class="investor-name">王振英</div>
        <div class="investor-job text-overflow">厦门市熙重集团 总经理</div>
        <div class="investor-man text-overflow">毅达汇智股权合伙人</div>
      </div>
      <buttom class="mentors">创业导师</buttom>
    </div>
  </div>
  <div class="col-xs-3 col-md-4 img-hover">
    <div class="investor">
      <div class="investor-img"><img src="../../../static/images/hd_p1.png"></div>
      <div class="investor-msg">
        <div class="investor-name">王振英</div>
        <div class="investor-job text-overflow">厦门市熙重集团 总经理</div>
        <div class="investor-man text-overflow">毅达汇智股权合伙人</div>
      </div>
      <buttom class="mentors">创业导师</buttom>
    </div>
  </div>
  <div class="col-xs-3 col-md-4 img-hover">
    <div class="investor">
      <div class="investor-img"><img src="../../../static/images/hd_p1.png"></div>
      <div class="investor-msg">
        <div class="investor-name">王振英</div>
        <div class="investor-job text-overflow">厦门市熙重集团 总经理</div>
        <div class="investor-man text-overflow">毅达汇智股权合伙人</div>
      </div>
      <buttom class="mentors">创业导师</buttom>
    </div>
  </div>
</div>
      <div class="button-more">
        <button>查看更多</button>
      </div>
      <div class="enroll">
        <div class="row ">
          <div class="col-xs-3 col-md-3 barely">
            <div>
              <p class="bj_img">
                <img src="../../../static/images/super_zhuce.png" alt="" />
              </p>
              <p>路演活动</p>
              <p class="ad">
                广泛征集，多伦筛选，追求品质
              </p>
            </div>
          </div>
          <div class="col-xs-3 col-md-3 barely">
            <div>
              <p class="bj_img">
                <img src="../../../static/images/super_jigou.png" alt="" />
              </p>
              <p>创业项目</p>
              <p class="ad">
                线上线下，多重对接，拓展机会
              </p>
            </div>
          </div>
          <div class="col-xs-3 col-md-3 barely">
            <div>
              <p class="bj_img">
                <img src="../../../static/images/super_huodong.png" alt="" />
              </p>
              <p>投资人</p>
              <p class="ad">资深专家，专属指导，提炼价值</p>
            </div>
          </div>
          <div class="col-xs-3 col-md-3 barely">
            <div class="noBor">
              <p class="bj_img">
                <img src="../../../static/images/super_huodong.png" alt="" />
              </p>
              <p>投资机构</p>
              <p class="ad">
                融资导入，广联资源，增值服务
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="pan-man">
        <h4>
          战略合作伙伴
        </h4>
        <div class="pan-img">
          <img src="../../../static/images/hd_p1.png"><img src="../../../static/images/hd_p1.png">
          <img src="../../../static/images/hd_p1.png"><img src="../../../static/images/hd_p1.png">
          <img src="../../../static/images/hd_p1.png"><img src="../../../static/images/hd_p1.png">
          <img src="../../../static/images/hd_p1.png"><img src="../../../static/images/hd_p1.png">
          <img src="../../../static/images/hd_p1.png"><img src="../../../static/images/hd_p1.png">
          <img src="../../../static/images/hd_p1.png"><img src="../../../static/images/hd_p1.png">
          <img src="../../../static/images/hd_p1.png"><img src="../../../static/images/hd_p1.png">
          <img src="../../../static/images/hd_p1.png"><img src="../../../static/images/hd_p1.png">
          <img src="../../../static/images/hd_p1.png"><img src="../../../static/images/hd_p1.png">
          <img src="../../../static/images/hd_p1.png"><img src="../../../static/images/hd_p1.png">
        </div>
        <div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "investmentHome",
      data(){
          return{
            navD: [
              { id: 1, zt: "投资人" },
              { id: 2, zt: "投资机构" },
              { id: 3, zt: "合作银行" },
              { id: 4, zt: " 投资基金" },
            ],
            cur:0
          }
      },
      methods: {

        getItme(item, index) {
          this.cur = index
          // switch (index) {
          //   case 2:
          //     this.$router.push({path: '/ServiceSupermarket/Home'})
          //     break;
          //   case 4:
          //     this.$router.push({path: '/InvestmentCenter/Home'})
          //     break;
          //   case 6:
          //     this.$router.push({path: '/Pages/CorporateCulture/Home'})
          //     break;
          //
          // }
        },
      }

    }
</script>

<style scoped>
  .main {
    background: #FFFFFF;
  }
  .active-center{
    margin-bottom: 50px;
  }
  .barely{
    padding-right: 0;
  }
.active-center-h{
  height:21px;
  font-size:20px;
  font-family:MicrosoftYaHei-Bold;
  font-weight:bold;
  color:rgba(51,51,51,1);
  text-align: center;
}
.active-center-p{
  height:48px;
  font-size:16px;
  font-family:MicrosoftYaHei;
  font-weight:400;
  color:rgba(102,102,102,1);
  line-height:32px;
  height: 67px;
}
.active-list{
  margin-top: 30px;
  margin-bottom: 30px;
}
.active-list-left{
 width: 500px;
  height: 380px;
  float: left;
}
.active-list-left img{
  width: 100%;
  height: 380px;
}
.active-list-right{
  width: 595px;
  height: 380px;
  float: right;
}
.active-list-right .flex-img{
display: flex;
  justify-content: space-between;
}
.flex-img img{
  width: 276px;
  height: 180px;
}
.active-text{
  margin-top: 22px;
}
.active-text h3{
  font-size:20px;
  font-family:MicrosoftYaHei;
  font-weight:400;
  color:rgba(51,51,51,1);
  padding-left: 10px;
  border-left: 4px #3095EC solid;
  margin-bottom: 8px;
}
.list-item{
  padding-left: 14px;
}
.list-item ul li{
  display: flex;
  justify-content: space-between;
  font-size:16px;
  font-family:MicrosoftYaHei;
  font-weight:400;
  color:rgba(102,102,102,1);
  line-height: 36px;
}
.button-more {
  text-align: center;
}
.button-more button {
  width:120px;
  height:32px;
  border:1px solid rgba(48,149,236,1);
  border-radius:16px;
  font-size:16px;
  font-family:MicrosoftYaHei;
  font-weight:400;
  color:rgba(51,51,51,1);
  background: #FFFFFF;
}
.startup-project{
  background-image:url("../../../static/icon/bg.png");
  padding-top: 80px;
  height: 536px;
}
  .tp-img{
    margin-bottom: 40px;
  }
  .tp-img img{
    width: 100%;
    height: auto;
  }
  .investor{
    display: flex;
    padding: 27px;
    position: relative;
    margin-bottom: 20px;
  }
  .investor-img{
    width: 100px;
    height: 100px;
    margin-right: 15px;
    display: inline-block;
  }
  .investor-msg{
    width: 62%;
    display: inline-block;
  }
  .tz-p {
    display: flex;
    margin-top: 60px;
    justify-content: space-around;
  }
  .tz-p span{
    font-size:24px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(51,51,51,1);
  }
  .detail-img{
    margin-bottom: 30px;
    margin-top: 20px;
  }
  .detail-img img{
    width: 100%;
    height: 100px;
  }
  .ad{
    font-size:20px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(51,51,51,1);
  }
  .barely p:last-child{
    font-size: 15px;
  }
  .pan-man h4{
    font-size:24px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(51,51,51,1);
    text-align: center;
  }
  .pan-img {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding:0 10px ;
  }
  .pan-img img {
    width: 250px;
    height: 120px;
    margin-bottom: 20px;
  }
  .active{
    border-bottom: 3px solid #1575F9;
    font-weight: 560;
    cursor: pointer;
  }
  .mentors{
    width:100px;
    height:32px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(21,117,249,1);
    border-radius:4px;

    font-size:16px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(21,117,249,1);
    text-align: center;
    line-height: 32px;
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .investor-name{
    font-size:20px;
    font-family:MicrosoftYaHei;
    font-weight:bold;
    color:rgba(21,117,249,1);
  }
  .investor-job{
    font-size:16px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(102,102,102,1);
  }
 .investor-man{
   font-size:16px;
   font-family:MicrosoftYaHei;
   font-weight:400;
   color:rgba(153,153,153,1);
 }

 .pan-man{
   padding-top: 79px;
   padding-bottom: 84px;
   margin-bottom: 100px;
   background:rgba(211,222,238,1);
 }
 .pan-man h4{
   font-size:24px;
   font-family:MicrosoftYaHei;
   font-weight:400;
   color:rgba(51,51,51,1);
   margin-bottom: 40px;
 }
.clear{ clear:both}
.img-hover:hover{
  background:rgba(255,255,255,1);
  border:1px solid rgba(224,224,224,1);
  box-shadow:0px 3px 24px 0px rgba(3,125,220,0.18);
  border-radius:4px;
}
  .img-hover:hover .mentors{
    background:rgba(255,151,2,1);
    box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.15);
    border-radius:4px;
    border:1px solid rgba(255,151,2,1);
    color:rgba(255,255,255,1);
  }
</style>
